<template>
    <div class="app-container">
        <el-card class="box-card components-container taskCode">
            <el-row :gutter="20">
                <el-col :span="6" class="leftPart">
                    <el-container>
                        <el-main style="border: 1px solid gainsboro; margin-bottom: 5px; height: 75vh;">
                            <div style="text-align: center;font-weight: 700;"> {{ form.name }}</div>
                            <div style="font-size: 15px;" v-html="form.remark"></div>
                        </el-main>
                        <!-- <el-footer>
                            <div style="margin-bottom: 3px;">
                                <el-button type="primary" style="width: 100%;display: block;">提交代码</el-button>
                            </div>
                            <div style="margin-bottom: 3px;">
                                <el-button type="warning" style="width: 100%;display: block;">获取帮助</el-button>
                            </div>
                        </el-footer> -->
                    </el-container>
                </el-col>
                <el-col :span="10">
                    <div style="border: 1px solid gainsboro;">
                        <!-- <codemirror :options="cmOption" v-model="code" ref="editHtml" @inputRead="onInputRead"
                            @ready="onCmReady" @focus="onCmFocus" @blur="onCmBlur" @cursorActivity="runPreview" /> -->
                        <codemirror class="htmlCodeMirror" :options="cmOption" v-model="form.resultCode" ref="editHtml"
                            @cursorActivity="runPreview(1)" />
                    </div>
                    <div style="border: 1px solid gainsboro;margin-top: 10px;">
                        <codemirror class="jsCodeMirror" :options="cmJSOption" v-model="form.initJsCode" ref="editJs"
                            @cursorActivity="runPreview(2)" />
                    </div>
                </el-col>
                <el-col :span="8">
                    <iframe id="preview" class="preview"></iframe>
                    <!-- <div id="mkview" class="preview markdown-body" style="display: none"></div> -->
                </el-col>
            </el-row>
        </el-card>

    </div>
</template>
  
<script>
import { getTask } from "@/api/student/task";
import { html_beautify } from "js-beautify";
import { codemirror } from 'vue-codemirror'
import "@/api/student/setting";
export default {
    name: "taskInfo",
    data() {
        return {
            form: {
                name: '',
                courseName: '',
                unitName: '',
                creatorName: '',
                createTime: '',
                remark: '',
                resultCode: '',
                resultImage: '',
                validFlag: '',
                srcList: [],
                initCssCode: '',
                initJsCode: '',
                resultJsCode: '',
                resultCssCode: '',
                initHtmlCode: ''
            },
            codeMirrorVal: null,
            curCode: '测试',
            cmOption: {
                lint: true, // 开启语法检查
                // tab宽度
                tabSize: 4,
                indentUnit: 4,
                foldGutter: true,
                // 高亮行功能
                styleActiveLine: true,
                // 调整scrollbar样式功能
                // scrollbarStyle: "overlay",
                // 自动括号匹配功能
                matchBrackets: true,
                // 显示行数
                lineNumbers: true,
                line: true,
                // 软换行
                lineWrapping: true,
                // 主题
                theme: "cobalt",
                keyMap: "sublime",
                // 语言及语法模式
                mode: {
                    name: "htmlmixed",
                    scriptTypes: [
                        {
                            matches: /\/x-handlebars-template|\/x-mustache/i,
                            mode: null,
                        },
                        {
                            matches: /(text|application)\/(x-)?vb(a|script)/i,
                            mode: "vbscript",
                        },
                    ],
                },
                collapseIdentical: false,
                highlightDifferences: true,
                viewportMargin: Infinity,
                // 代码提示功能
                hintOptions: {
                    // 避免由于提示列表只有一个提示信息时，自动填充
                    completeSingle: false,
                },
                // 只读
                readOnly: 'nocursor',
            },
            curJsCode: "",
            codeJsMirrorVal: null,
            cmJSOption: {
                tabSize: 2, // tab
                styleActiveLine: true, // 高亮选中行
                lineNumbers: true, // 显示行号
                styleSelectedText: true,
                line: true,
                foldGutter: true, // 块槽
                gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
                highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例
                mode: { // 模式, 可查看 codemirror/mode 中的所有模式
                    name: 'javascript',
                    json: true
                },
                // hint.js options
                hintOptions: {
                    // 当匹配只有一项的时候是否自动补全
                    completeSingle: false
                },
                // 快捷键 可提供三种模式 sublime、emacs、vim
                keyMap: 'sublime',
                matchBrackets: true,
                showCursorWhenSelecting: true,
                theme: 'monokai', // 主题 
                extraKeys: { 'Ctrl': 'autocomplete' }, // 可以用于为编辑器指定额外的键绑定，以及keyMap定义的键绑定
                // 只读
                readOnly: 'nocursor',
            }
        };
    },
    created() {
        this.getTaskDetail();
    },
    components: {
        codemirror
    },
    activated() {
        // 在页面被激活时执行的逻辑  
        this.$nextTick(() => {
            this.setCodemirrorValue();
        });
    },
    watch: {
        '$route.params': {
            immediate: true,
            handler() {
                if (this.$route.name == 'taskInfo') {
                    this.getTaskDetail();
                }
            }
        }
    },
    methods: {
        getTaskDetail() {
            var id = this.$route.query.id
            getTask(id).then(response => {
                response.data.resultImage = "/dev-api" + response.data.resultImage
                response.data.srcList = [response.data.resultImage];
                this.form = response.data;
                // 完成后执行另一个函数  
                this.$nextTick(() => {
                    this.setCodemirrorValue();
                });
            });
        },
        runPreview() {
            const codemirror = this.$refs.editHtml.codemirror;
            const resultJsCodeEditor = this.$refs.editJs.codemirror;
            this.codeMirrorVal = codemirror.getValue();
            this.codeJsMirrorVal = resultJsCodeEditor.getValue()
            // 获取 iframe 的引用  
            var iframe = document.getElementById("preview");

            iframe.contentDocument.open();
            iframe.contentDocument.write(codemirror.getValue());
            if (this.codeJsMirrorVal != undefined && this.codeJsMirrorVal != "" && this.codeJsMirrorVal != null) {
                // 获取 iframe 的 contentDocument 属性  
                var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

                // 在 iframe 中写入 JavaScript 代码  
                var script = iframeDoc.createElement("script");
                script.textContent = resultJsCodeEditor.getValue();
                iframeDoc.body.appendChild(script);
            }

            iframe.contentDocument.close();
        },
        setCodemirrorValue() {
            if (this.form.resultCode == null) {
                this.form.resultCode = "";
            } else {
                this.form.resultCode = html_beautify(this.form.resultCode);
            }
            if (this.form.resultCssCode == null) {
                this.form.resultCssCode = "";
            } else {
                this.form.resultCssCode = html_beautify(this.form.resultCssCode);
            }
            if (this.form.resultJsCode == null) {
                this.form.resultJsCode = "";
            }
            const resultCodeEditor = this.$refs.editHtml.codemirror;
            const resultJsCodeEditor = this.$refs.editJs.codemirror;
            resultCodeEditor.setValue(this.form.resultCode);
            resultJsCodeEditor.setValue(this.form.resultJsCode);
            // this.initRunPreview(resultCodeEditor, resultJsCodeEditor);
            this.runPreview();
        }
    }
};
</script>
<style>
.card-head {
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    background-color: purple;
    padding: 20px;
    color: white;
    font-size: 20px;
}

.card-body {
    padding: 20px;
}

.user-avatar {
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin-right: 10px;
}

.time {
    font-size: 13px;
    color: #999;
}

.bottom {
    margin-top: 15px;
    line-height: 12px;
}

.button {
    padding: 6px;
    float: right;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.card-content {
    font-size: 12px;
    line-height: 20px;
    color: #999;
}

.CodeMirror {
    width: 100% !important;
    /* height: 40vh !important; */
}

.htmlCodeMirror .CodeMirror {
    height: 50vh !important;
}

.jsCodeMirror .CodeMirror {
    height: 25vh !important;
}

.taskCode {
    height: 80vh !important;
}

.preview {
    border: none;
    height: 100%;
    background: white;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
}
</style>
  